<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>容器标签</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
<!--
    div:块级元素容器,自带换行
-->
<div style="width: 200px;height: 200px;border: 1px solid red; color:red;">
    <h1>这是标题</h1>
    <marquee>这是滚动内容</marquee>
</div>
<div style="width: 202px;height: 202px;background: green;position: absolute;left: 202px;top: 0px;">第2个div</div>
<div>第3个div</div>
<hr>
<!--
    span:行级元素容器
    无法设置宽与高
-->
<span style="width: 300px;height: 200px;border: 1px solid red; color:green;">
    <font>这是字体</font>
    <h1>这是标题</h1>
</span>
<span>第2个span</span>
<span>第3个span</span>
</body>
</html>